
import React, {Component} from 'react'
import PropsRoute from "../News/index";
import Me from "../me/index"
import Message from "../message/index"
import Todo from "../todo/index"
import {NavLink, Navigate, Route, Routes} from "react-router-dom";
import { NavBar, TabBar } from 'antd-mobile'
import { useNavigate, Outlet } from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export const withNavigation = (Component) => {
  return (props) => <Component {...props} navigate={useNavigate()} />;
};
export default class MultilevelRoute extends Component {
  constructor(){
    super()
  }
  state = {
    activeKey: "/index",
    tabs : [
      {
        key: '/News',
        title: '首页',
        icon: <AppOutline />,
      },
      {
        key: '/todo',
        title: '我的待办',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/message',
        title: '我的消息',
        icon: <MessageOutline />,
      },
      {
        key: '/me',
        title: '个人中心',
        icon: <UserOutline />,
      },
    ]
  };
  setActiveKey = (e) => {
    let path = "/home" + e;
    this.setState({
      activeKey: e,
    });
    //跳转  不能用this.props.history.push()报错
    this.props.navigate(path);
  };
    render() {
        return (
            <div>
             
                <div>
                <TabBar  activeKey={this.state.activeKey}  onChange={value => setRouteActive(value)}>
                  {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                  ))
                  }
                </TabBar>
                    <ul>
                        {/* 传参方式-params */}
                        <li><NavLink to="1/11">prop-params</NavLink></li>
                        {/* 传参方式-search */}
                        <li><NavLink to="/home/searchTest?id=2&code=22">prop-search</NavLink></li>
                        {/*
                            react-router-dom v5 传参写法:
                            <NavLink to={{pathname:'/multilevelRoute/stateTest',state:{id:'3',code:33}}}>prop-               state</NavLink>
                        */}
                        {/* 传参方式-state */}
                        <li><NavLink to="/home/stateTest" state={{id:'3',code:33}}>prop-state</NavLink></li>
                    </ul>
                </div>
                <div>
                    <Routes>
                        {/*
                            react-router-dom v5写法 path = "全路径":
                            <Route path="/multilevelRoute/search" element={<PropsRoute></PropsRoute>}></Route>
                        */}
                        {/* 
                            react-router-dom v6写法
                         */}
                        {/* <Route path="/paramsTest/:id/:code" element={<PropsRoute>params</PropsRoute>}></Route>
                        <Route path="/searchTest" element={<PropsRoute>search</PropsRoute>}></Route> */}
                        <Route path="News" element={<PropsRoute></PropsRoute>}></Route>
                        <Route path="Me" element={<Me></Me>}></Route>
                        <Route path="Message" element={<Message></Message>}></Route>
                        <Route path="Todo" element={<Todo></Todo>}></Route>


                        <Route path="/*" element={<Navigate to="News" />}></Route>
                    </Routes>
                </div>
            </div>
        )
    }
}
